<template>
  <div class="amap-form-select">
    <el-form
      ref="form"
      :model="form"
      :rules="required ? rules : {}"
      :label-width="labelWidth"
    >
      <el-form-item label="选择区域" prop="area" :required="required">
        <AreaSelect v-model="form.area" :adcode.sync="form.adcode" />
      </el-form-item>
      <el-form-item label="地图选点" :required="required">
        <el-button
          type="primary"
          size="medium"
          icon="el-icon-location-outline"
          @click="openAMapSelect"
          >去定位</el-button
        >
        <span v-show="form.lat && form.lng" class="lnglat-span">{{
          `（${form.lng}，${form.lat}）`
        }}</span>
      </el-form-item>
      <el-form-item label="详细地址" prop="address" :required="required">
        <el-input v-model="form.address" placeholder="请输入详细地址"></el-input>
      </el-form-item>
    </el-form>

    <MapSelect
      ref="aMapSelect"
      :amap-key="amapKey"
      :amap-code="code"
      @get-address="getAddressResult"
    />
  </div>
</template>

<script>
import AreaSelect from "../BaseAreaSelect";
import MapSelect from "../BaseAmapSelect";

export default {
  name: "BaseMapFormSelect",
  props: {
    amapKey: {
      type: String,
      default: "你的key",
    },
    code: {
      type: String,
      default: "你的code",
    },
    labelWidth: {
      type: String,
      default: "80px",
    },
    required: {
      type: Boolean,
      default: true,
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  components: { AreaSelect, MapSelect },
  data() {
    return {
      form: {
        area: [],
        adcode: "",
        address: "",
        lat: null,
        lng: null,
      },
      rules: {
        area: [
          { required: true, message: "请选择所在省市区县", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    formData: {
      deep: true,
      handler(newValue, oldValue) {
        this.form = Object.assign(this.form, newValue);
      },
    },
  },
  methods: {
    // 打开定位弹窗
    openAMapSelect() {
      const options = {
        zoom: 15,
      };
      if (this.form.lat && this.form.lng) {
        options.center = [this.form.lng, this.form.lat];
        options.initPoint = options.center;
        options.initAddress = this.form.address;
      } else if (this.form.adcode) {
        options.cityId = this.form.adcode;
      }
      this.$refs.aMapSelect.init(options);
    },
    // 获取结果
    getAddressResult(data) {
      this.form.adcode = data.adcode;
      this.form.address = data.address;
      this.form.lat = data.latitude;
      this.form.lng = data.longitude;
    },
    // 验证获取结果
    async getValidateResult() {
      if (this.required) {
        let validateRes = null;
        let result = null;
        // validate函数不传参数会返回一个Promise，校验失败为reject false，所以用try包裹
        try {
          validateRes = await this.$refs.form.validate();
          if (!(this.form.lng && this.form.lat)) {
            throw false;
          }
        } catch (error) {
          validateRes = false;
        } finally {
          if (validateRes) {
            result = {
              validateRes,
              msg: "",
              datas: this.form,
            };
          } else {
            result = {
              validateRes,
              msg: "请填写必要信息",
            };
          }
        }
        return result;
      }
    },
    // 不验证获取结果
    getResult() {
      return this.form;
    },
    // 数据重置
    reset() {
      this.form = {
        area: [],
        adcode: "",
        address: "",
        lat: null,
        lng: null,
      }
      this.$refs.form.clearValidate();
    }
  },
};
</script>

<style lang="scss" scoped>
.amap-form-select {
  
}
.lnglat-span {
  margin-left: 5px;
}
</style>
